<template>
  <v-chart :options="orgOption" autoresize />
</template>

<script>
export default {
  name: "AppDataGrid",
  data() {
    return {
      category: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      lineData: [100, 200, 300, 400, 500, 600, 500],
      barData: [20, 100, 100, 300, 400, 400, 400]
    };
  },
  computed: {
    rateData() {
      let rateData = [];
      for (var i = 0; i < 33; i++) {
        var rate = this.barData[i] / this.lineData[i];
        rateData[i] = (rate * 100).toFixed(2);
      }
      return rateData;
    },
    orgOption() {
      let echart = this.$echarts;

      let option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.1)",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              backgroundColor: "#7B7DDC"
            }
          }
        },
        legend: {
          data: ["活跃用户", "用户量", "活跃率"],
          textStyle: {
            color: "#B4B4B4"
          },
          top: "90%"
        },
        grid: {
          width: "80%",
          height: "60%"
        },
        xAxis: {
          data: this.category,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },

            axisLabel: {
              formatter: "{value}"
            }
          },
          {
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisLabel: {
              formatter: "{value} %"
            }
          }
        ],
        series: [
          {
            name: "活跃率",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "#F02FC2"
              }
            },
            data: this.rateData
          },
          {
            name: "活跃用户",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#956FD4"
                  },
                  {
                    offset: 1,
                    color: "#3EACE5"
                  }
                ])
              }
            },
            data: this.barData
          },
          {
            name: "用户量",
            type: "bar",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(156,107,211,0.5)"
                  },
                  {
                    offset: 0.2,
                    color: "rgba(156,107,211,0.3)"
                  },
                  {
                    offset: 1,
                    color: "rgba(156,107,211,0)"
                  }
                ])
              }
            },
            z: -12,

            data: this.lineData
          }
        ]
      };

      return option;
    }
  },
  methods: {
    refresh() {
      for (let i = 0; i < this.lineData.length; i++) {
        this.lineData[i] = this.lineData[i] * 2;
      }
    }
  }
};
</script>

<style scoped>
.echarts {
  height: 35vh !important;
}
</style>
